<script lang="ts" setup>
import { reactive, ref, shallowRef } from 'vue'
import { ElButton, ElInput, ElOption, ElSelect } from 'element-plus'
import { XyIconRender } from '@/components/XyIcon'

interface Student {
  name: string
  age: number
  sex: string
  address: string
  banji: string
}

const searchMethod = async (searchData: SearchData, pageData: PageData) => {
  pageData.loading = true
  console.log(searchData)
  await new Promise(r => setTimeout(r, 500))
  pageData.loading = false
  pageData.total = 100
}

const tableData = reactive<Student[]>([
  {
    name: '王五',
    age: 1,
    sex: '男',
    address: '北京市',
    banji: '1班'
  },
  {
    name: '张三',
    age: 2,
    sex: '',
    address: '开鲁县',
    banji: '2班'
  },
  {
    name: '李四',
    age: 5,
    sex: '男',
    address: '通辽市',
    banji: ''
  }
])
const tableConfigButton = reactive<TableConfig>({
  isSearchMethod: false,
  columns: [
    {
      type: 'single',
      prop: 'single'
    },
    {
      type: 'selection',
      prop: 'selection'
    },
    {
      type: 'default',
      label: '姓名',
      prop: 'name',
      minWidth: 380
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age',
      minWidth: 380
    },
    { type: 'default', label: '性别', prop: 'sex', width: 200 },
    {
      label: '地址',
      type: 'default',
      prop: 'address',
      minWidth: 380
    },
    {
      label: '班级',
      type: 'default',
      prop: 'banji',
      minWidth: 380
    }
  ],
  buttonTopOperateConf: [
    {
      buttonPosition: 'left',
      slotName: 'search'
    },
    {
      label: '增加',
      type: 'primary',
      buttonPosition: 'left',
      icon: shallowRef(XyIconRender('line-md:plus-square')),
      click: data => {
        console.log(data)
      }
    },
    {
      type: 'danger',
      buttonPosition: 'left',
      icon: shallowRef(XyIconRender('line-md:document-delete')),
      click: data => {
        console.log(data)
      }
    },
    {
      circle: true,
      type: 'success',
      buttonPosition: 'right',
      actionType: 'refresh'
    },
    {
      label: '表格操作',
      type: 'warning',
      buttonPosition: 'right',
      actionType: 'columnAction',
      columnActionConfirm: true,
      columnActionMethod(columnActionData) {
        console.log(columnActionData)
      }
    }
  ],
  columnActionData: [
    {
      type: 'single',
      columnSH: true,
      prop: 'single',
      fixed: 'left'
    },
    {
      type: 'selection',
      columnSH: true,
      prop: 'selection'
    },
    {
      prop: 'name',
      type: 'default',
      label: '姓名',
      columnSH: true
    },
    {
      prop: 'age',
      type: 'default',
      label: '年龄',
      columnSH: true
    },
    {
      prop: 'sex',
      type: 'default',
      label: '性别',
      columnSH: true
    },
    {
      prop: 'address',
      type: 'default',
      label: '地址',
      columnSH: true
    }
  ]
})
const columnActionMethod = (val: any) => {
  console.log(val)
}
const select = ref('')
const search = ref('')
</script>
<template>
  <XyTable
    :tableData="tableData"
    :tableConfig="tableConfigButton"
    @column-action-method="columnActionMethod"
    @search-method="searchMethod"
  >
    <template #search>
      <el-input v-model="search" placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="XyIconRender('mdi:magnify')" type="primary" />
        </template>
      </el-input>
    </template>
  </XyTable>
</template>
